
<table id="user-job-table" class="table table-condensed">
  <tr style='background-color:whitesmoke'>
    <th>Job</th>
    <th>User</th>
    <th>Virtual Cluster</th>
    <th>Start Time</th>
    <th>Duration</th>
    <th>Retries</th>
    <th>Status</th>
    <th>Action</th>
  </tr>
  <tr>
    <%
    const vcName = (jobStatus.virtualCluster) ? jobStatus.virtualCluster : 'default';
    const hjss = getHumanizedJobStateString(jobStatus);
    %>
    <td><%= jobName %></td>
    <td><%= jobStatus.username %></td>
    <td><a href="virtual-clusters.html?vcName=<%= vcName %>"><%= vcName %></a></td>
    <td><%= convertTime(false, jobStatus.createdTime) %></td>
    <td><%= convertTime(true, jobStatus.createdTime, jobStatus.completedTime) %></td>
    <td>
      <% if (jobStatus.retries === 0) { %>
        <%= jobStatus.retries %>
      <% } else { %>
        <a name='jobRetryLink'
          onclick="setJobRetryLink('<%= namespace %>', '<%= jobName %>','<%= jobStatus.retries %>')"
          href='javascript:void(0);'>
          <%= jobStatus.retries %>
        </a>
      <% } %>
    </td>
    <td><%= convertState(hjss) %></td>
    <td>
      <% if (hjss === 'Waiting' || hjss === 'Running') { %>
        <button class="btn btn-default btn-xs" onclick="stopJob('<%= namespace %>', '<%= jobName %>')">Stop</button>
      <% } else { %>
        <button class="btn btn-default btn-xs" disabled>Stop</button>
      <% } %>
      <button class="btn btn-default btn-xs" id="resubmitjob_btn" onclick="cloneJob('<%= namespace %>', '<%= jobName %>')">Clone</button>
    </td>
  </tr>
</table>

<hr class="divider">

<table class="table table-condensed">
  <tr>
    <td>
      <div name='configInfoDiv' style='float:left'>
        <a name='configInfoLink'
           onclick="showConfigInfo('<%= jobName %>')"
           href='javascript:void(0);'>
           View Job Config
        </a>
      </div>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a data-toggle="collapse" href="#appExitDiagnostics" aria-expanded="false" aria-controls="appExitDiagnostics">
        View Application Summary
      </a>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="<%= jobStatus.appTrackingUrl %>" target="_blank">
        Go to Application Tracking Page
      </a>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="<%= grafanaUri %>/dashboard/db/joblevelmetrics?var-job=<%= (namespace ? (namespace + '~') : '') + jobName %>" target="_blank">
        Go to Job Metrics Page
      </a>
    </td>
  </tr>
</table>

<div class="collapse" id="appExitDiagnostics">
  <br>
  <div class="well">
    <p>Start Time: <%= convertTime(false, jobStatus.appLaunchedTime) %></p>
    <p>Finish Time: <%= convertTime(false, jobStatus.appCompletedTime) %></p>
    <p>Exit Diagnostics:</p>
    <br>
    <% if (jobStatus.appExitDiagnostics) { %>
      <%= jobStatus.appExitDiagnostics.replace(/\n/g, "<br>") %>
    <% } else { %>
      Not available yet.
    <% } %>
  </div>
</div>

<hr class="divider">

<table class="table table-condensed">
  <thead>
    <tr style='background-color:whitesmoke'>
      <th>Task Role</th>
      <th>Task Index</th>
      <th>Container Name</th>
      <th>IP</th>
      <th>Ports</th>
      <th>GPUs</th>
      <th>Exit Code</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% for (let taskRole of Object.keys(taskRoles)) { %>
      <% for (let i = 0; i < taskRoles[taskRole].taskStatuses.length; i ++) {
        var containerExitCode = taskRoles[taskRole].taskStatuses[i].containerExitCode
        var isContainerFailed = typeof containerExitCode == 'number' && containerExitCode !== 0
        var cellClass = isContainerFailed ? 'danger' : ''
      %>
        <tr>
          <% if (i == 0) { %>
            <td rowspan="<%= taskRoles[taskRole].taskStatuses.length %>"><%= taskRole %></td>
          <% } %>
          <td class="<%= cellClass %>"><%= taskRoles[taskRole].taskStatuses[i].taskIndex %></td>
          <td class="<%= cellClass %>"><%= taskRoles[taskRole].taskStatuses[i].containerId %></td>
          <td class="<%= cellClass %>"><%= taskRoles[taskRole].taskStatuses[i].containerIp %></td>
          <td class="<%= cellClass %>">
            <% if (taskRoles[taskRole].taskStatuses[i].containerPorts) { %>
              <% for (let portLabel of Object.keys(taskRoles[taskRole].taskStatuses[i].containerPorts)) { %>
                <p><%= portLabel %>: <%= taskRoles[taskRole].taskStatuses[i].containerPorts[portLabel] %></p>
              <% } %>
            <% } else { %>
              N/A
            <% } %>
          </td>
          <td class="<%= cellClass %>"><%= convertGpu(taskRoles[taskRole].taskStatuses[i].containerGpus) %></td>
          <td class="<%= cellClass %>"><%= taskRoles[taskRole].taskStatuses[i].containerExitCode == null
            ? '?' : taskRoles[taskRole].taskStatuses[i].containerExitCode %></td>
          <td class="<%= cellClass %>">
            <div name='sshInfoDiv-<%= taskRoles[taskRole].taskStatuses[i].containerId %>' style='float:left'>
              <a name='sshInfoLink-<%= taskRoles[taskRole].taskStatuses[i].containerId %>'
                onclick='showSshInfo("<%= taskRoles[taskRole].taskStatuses[i].containerId %>")'
                href='javascript:void(0);'>View SSH Info</a>
            </div>
            <div style='float:left'>&nbsp;&nbsp;|&nbsp;&nbsp;</div>
            <div style='float:left'>
              <a href="<%= taskRoles[taskRole].taskStatuses[i].containerLog %>" target="_blank">Go to Tracking Page</a>
            </div>
          </td>
        </tr>
      <% } %>
    <% } %>
  </tbody>
</table>
